﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Dispatcher des événements dans votre Google Agenda !</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link href="static/rdv.css" rel="stylesheet" type="text/css" />
<link href="static/jquery-ui-1.8.7.custom.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
<script type="text/javascript" src="static/jquery.ui.datepicker-fr.js"></script>

<script type="text/javascript">
 $(document).ready(function() {
  // au debut, le bouton de suppression est désactivé
  $('#btnDel').attr('disabled','disabled');

  $('#btnAdd').click(function() { // sur le click du bouton d'ajout de plage
   var oldNum = $('.plage_clonee').length; // combien y a-t-il actuellement de plages clonées
   var newNum = new Number(oldNum + 1); // on en déduit le nouveau n°
   // 'clone' l'ancienne plage
   var newElem = $('#plage' + oldNum).clone().attr('id', 'plage' + newNum);
   // change les name et id de ses enfants
   newElem.children('#jour' + oldNum).attr('id', 'jour' + newNum).attr('name', 'jour' + newNum);
   newElem.children('#debut' + oldNum).attr('id', 'debut' + newNum).attr('name', 'debut' + newNum);
   newElem.children('#nbeve' + oldNum).attr('id', 'nbeve' + newNum).attr('name', 'nbeve' + newNum);
   // insert 'après' l'ancienne plage
   $('#plage' + oldNum).after(newElem);
   // active le bouton de suppression
   $('#btnDel').attr('disabled','');
   // on bloque l'ajout à {{ nb_plages_max }} plages
   if (newNum == {{ nb_plages_max }})
    $('#btnAdd').attr('disabled','disabled');
  });

  $('#btnDel').click(function() { // sur le click du bouton de suppression de plage
   var oldNum = $('.plage_clonee').length; // combien y a-t-il actuellement de plages clonées
   $('#plage' + oldNum).remove(); // on enlève le dernier élément
   // active le bouton d'ajout
   $('#btnAdd').attr('disabled','');
   if (oldNum-1 == 1) // s'il n'en reste qu'un ...
    $('#btnDel').attr('disabled','disabled'); // désactive le bouton de suppression
  });

 });
</script>

</head><body><div id="main" class="main">

<h3>Dispatcher des événements dans votre Google Agenda !</h3>
<hr />
<p>Vous avez pris de bonnes résolutions pour la nouvelle année ?
<div class="nom_etape">Vous prévoyez de :</div>
<div class="desc_etape">
<ul><li>faire un peu de Yoga</li><li>laver la voiture</li><li>classer les papiers</li><li>apprendre 3 mots de chinois</li></ul>
</div>
Mais bien entendu vous ne pourrez pas faire tout cela chaque semaine.
<p>Vous devez rencontrer chacun de vos collaborateurs et vous n'avez que le mercredi matin à y consacrer ?
</p>
<p><i>Ne quittez pas cette page !</i> vous avez trouvé ce qu'il vous faut.</p><p>Cette application va vous permettre de créer, dans votre propre Agenda, des événements à partir d'une liste.</p>

<div class="{% ifequal num_etape 1 %}actif{% else %}inactif{% endifequal %} arrondi">
  <div class="nom_etape">1ère étape :</div>
  <div class="desc_etape">
    {% if utilisateur_connecte %}
    Vous êtes connecté {{ nom_utilisateur }}&nbsp;!&nbsp;<a href="{{ lien_connection }}">Se déconnecter</a>
    {% else %}
    <a href="{{ lien_connection }}">Se connecter</a>
    {% endif %}
  </div>
</div>

<div class="{% ifequal num_etape 2 %}actif{% else %}inactif{% endifequal %} arrondi">
<div class="nom_etape">2ème étape :</div>
<div class="desc_etape">
{% if jeton_trouve %}
  L'utilisation du service Google Agenda a été autorisée.
  {% ifequal num_etape 2 %}
  <a href="/ajout">Passer à l'étape suivante</a>.
  {% endifequal %}
{% else %}
 {% ifequal token_request_url None %}
   <u>Autoriser ce site</u> à utiliser le service Google Agenda.
  {% else %}
    <!-- Lien permettant à l'appli d'accéder à votre Google Agenda -->
    <a href="{{token_request_url}}">Autoriser ce site</a> à utiliser le service Google Agenda.
  {% endifequal %}
{% endif %}
</div>
</div>

<div class="{% ifequal num_etape 3 %}actif{% else %}inactif{% endifequal %} arrondi">
<div class="nom_etape">3ème étape :</div>
<div class="desc_etape">
<form id="event_form" action="/ajout" method="post">
Saisissez vos disponibilités :
<p>
<label for="datedebut">à partir du  :</label><input type="text" name="datedebut" id="datedebut" value="{% now "d/m/Y" %}" {% ifnotequal num_etape 3 %}disabled="disabled"{% endifnotequal %}>
pour <input type="radio" name="pour1mois" checked="checked" value="1" />1 mois
<br />
<label for="titre">titre :</label>
<input name="titre" id="titre" {% ifnotequal num_etape 3 %}disabled="disabled"{% endifnotequal %} type="text" value="rendez-vous" />

<label for="duree">durée de chaque événement :</label>
<input name="duree" id="duree" {% ifnotequal num_etape 3 %}disabled="disabled"{% endifnotequal %} type="text" class="nombre" value="15" size="3" maxlength="3" />mn.
<br />
<label for="liste">Liste des activités :</label><br />
<textarea name="liste" id="liste" {% ifnotequal num_etape 3 %}disabled="disabled"{% endifnotequal %} rows="7" cols="55"></textarea>
</p>

 <div id="plage1" style="margin-bottom:4px;" class="plage_clonee">
 le
 <select name="jour1" id="jour1" {% ifnotequal num_etape 3 %}disabled="disabled"{% endifnotequal %}>
  <option value="1">Lundi</option>
  <option value="2">Mardi</option>
  <option value="3">Mercredi</option>
  <option value="4">Jeudi</option>
  <option value="5">Vendredi</option>
 </select>

 à partir de <input type="text" name="debut1" id="debut1" {% ifnotequal num_etape 3 %}disabled="disabled"{% endifnotequal %} class="nombre" value="9" size="2" maxlength="2" />h
 pour <input type="text" name="nbeve1" id="nbeve1" {% ifnotequal num_etape 3 %}disabled="disabled"{% endifnotequal %} class="nombre" value="1" size="2" maxlength="2" /> événement(s).
 </div>

 <div>
  <input type="button" id="btnAdd" value="Ajouter une plage horaire" {% ifnotequal num_etape 3 %}disabled="disabled"{% endifnotequal %} />
  <input type="button" id="btnDel" value="Supprimer" {% ifnotequal num_etape 3 %}disabled="disabled"{% endifnotequal %} />
 </div>

 <div class="creer">
 <button {% ifnotequal num_etape 3 %}disabled="disabled"{% endifnotequal %}>Creer les événements dans mon agenda</button>
 </div>
</form>
{% if ajout_ok %}<p class="info">L'événement a été ajouté.</p>{% endif %}
</div>
</div>
<hr />
<div class="pied">
Ce site utilise
<img src="http://code.google.com/appengine/images/appengine-noborder-120x30.gif" 
alt="Powered by Google App Engine" /> et <img src="/static/jQuery_logo_color_onwhite_smaller.png" 
alt="JQuery" />
</div>
</div>

<script type="text/javascript">
  $(function() {
    $("#datedebut").datepicker($.datepicker.regional['fr']);
  });
</script>

</body></html>